
<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()

const menusJson = sessionStorage.getItem("menu")
const menus = ref({})

if(menusJson){
  menus.value =JSON.parse(menusJson)
  // console.log(menus.value)
}

const onAsideMenuSelect = (index) =>{
 router.push(index)
}

const loginOut=() =>{
  router.push('/')
}

</script>
<template>
    <el-container>
      <el-header>
        <el-menu  mode="horizontal" :ellipsis="false">
          <el-menu-item index="0">LOGO</el-menu-item>
          <div class="grow" />
          <el-menu-item index="1">球鞋回收后台管理</el-menu-item>
          <el-button style="margin:14px;border: none" @click="loginOut">
            <el-icon size="large" ><SwitchButton /></el-icon>
          </el-button>
<!--            <el-menu-item index="2-2">退出账户</el-menu-item>-->

        </el-menu>

      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar class="el-aside-scrollbar">
          <el-menu size="large" class="el-menu-aside" @select="onAsideMenuSelect">
            <el-sub-menu size="large" :index="menu.path" v-for="menu in menus" :key="menu.id">
              <template #title>{{ menu.metaTitle }}</template>
              <el-menu-item  size="large" :index="children.path" v-for="children in menu.children" :key="children.id" >
                {{ children.metaTitle}}
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-main>
          <el-scrollbar class="el-main-scrollbar">
            <RouterView></RouterView>
          </el-scrollbar>

        </el-main>
      </el-container>
    </el-container>
</template>


<style scoped>
.el-header{
  padding: 0;
}

.grow{
  flex-grow: 1;
}

.el-aside{
  width: 250px;
}
.el-aside-scrollbar{
  height: calc(100vh - 60px);
  border-right: 0.8px solid rgb(220, 223, 230);
}

.el-menu-aside{
  border-right: none;
}

.el-main-scrollbar{
  height: calc(100vh - 100px);
  /*background-color: #2c3e50;*/
}

</style>